<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="utf-8">

                <style>
                body {
                        font: normal 62.5%/1.5 Arial, sans-serif;
                        letter-spacing: 0;
                        background-color: #ffffff;
                        height: 300px;
                        padding: 0;
                        margin: 0;
                }
                #slides {
                        z-index: 100;
                }
                .slides_container {
                        width: 600px;
                        height: 300px;
                        overflow: hidden;
                        display: none;
                        margin: 0 auto;
                }
                .slides_container div.slide {
                        width: 600px;
                        display: block;
                        height: 300px;
                }
                #slides .next,#slides .prev {
                        position: absolute;
                        top: 160px;
                        left: 60px;
                        width: 24px;
                        height: 43px;
                        display: block;
                        z-index: 101;
                        opacity: 0.5;
                }                
                #slides .next {
                        left: 540px;
                }
                .pagination {
                        margin: 0px auto 0;
                        width: 100px;
                }
                .pagination li {
                        float: left;
                        margin: 0 1px;
                        list-style: none;
                }
                .pagination li a {
                        display: block;
                        width: 12px;
                        height: 0;
                        padding-top: 12px;
                        background-position: 0 0;
                        float: left;
                        overflow: hidden;
                }                
                .pagination li.current a {
                        background-position: 0 -12px;
                }
                .caption {
                        z-index: 500;
                        position: absolute;
                        left: 0;
                        bottom: 50px;
                        height: auto;
                        padding: 5px 20px 10 20px;
                        background: #000;
                        background: rgba(0, 0, 0, 0.5);
                        width: 930px;
                        line-height: 1.33;
                        color: #b0f0d8;
                        border-top: 1px solid #000;
                        text-shadow: none;
                        font: normal 16px arial, helvetica;
                }
                a:link,a:visited {
                        color: #599100;
                        text-decoration: none;
                }
                a:hover,a:active {
                        color: #599100;
                        text-decoration: underline;
                }
                span.newsTitle {
                        font-size: 18px;
                        text-transform: uppercase;
                        font-weight: bold;
                        border-bottom: 1px solid #b0f0d8;
                }
                #fondo {
                        float:left;
                        position:relative;
                }
                #fondo .informacion {
                        width:320px;
                        position:absolute;
                        top:10px;
                        left:14px;
                }
                </style>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
                <script>
                /*
                * Slides, A Slideshow Plugin for jQuery
                * Intructions: http://slidesjs.com
                * By: Nathan Searles, http://nathansearles.com
                * Version: 1.1.9
                * Updated: September 5th, 2011
                *
                * Licensed under the Apache License, Version 2.0 (the "License");
                * you may not use this file except in compliance with the License.
                * You may obtain a copy of the License at
                *
                * http://www.apache.org/licenses/LICENSE-2.0
                *
                * Unless required by applicable law or agreed to in writing, software
                * distributed under the License is distributed on an "AS IS" BASIS,
                * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
                * See the License for the specific language governing permissions and
                * limitations under the License.
                */
                (function(a){a.fn.slides=function(b){return b=a.extend({},a.fn.slides.option,b),this.each(function(){function w(g,h,i){if(!p&&o){p=!0,b.animationStart(n+1);switch(g){case"next":l=n,k=n+1,k=e===k?0:k,r=f*2,g=-f*2,n=k;break;case"prev":l=n,k=n-1,k=k===-1?e-1:k,r=0,g=0,n=k;break;case"pagination":k=parseInt(i,10),l=a("."+b.paginationClass+" li."+b.currentClass+" a",c).attr("href").match("[^#/]+$"),k>l?(r=f*2,g=-f*2):(r=0,g=0),n=k}h==="fade"?b.crossfade?d.children(":eq("+k+")",c).css({zIndex:10}).fadeIn(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(":eq("+k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+l+")",c).css({display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+l+")",c).css({display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1)}):d.children(":eq("+l+")",c).fadeOut(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(":eq("+k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing)}):d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing,function(){a.browser.msie&&a(this).get(0).style.removeAttribute("filter")}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+k+")").css({left:r,display:"block"}),b.autoHeight?d.animate({left:g,height:d.children(":eq("+k+")").outerHeight()},b.slideSpeed,b.slideEasing,function(){d.css({left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"none",zIndex:0}),b.animationComplete(k+1),p=!1}):d.animate({left:g},b.slideSpeed,b.slideEasing,function(){d.css({left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"none",zIndex:0}),b.animationComplete(k+1),p=!1})),b.pagination&&(a("."+b.paginationClass+" li."+b.currentClass,c).removeClass(b.currentClass),a("."+b.paginationClass+" li:eq("+k+")",c).addClass(b.currentClass))}}function x(){clearInterval(c.data("interval"))}function y(){b.pause?(clearTimeout(c.data("pause")),clearInterval(c.data("interval")),u=setTimeout(function(){clearTimeout(c.data("pause")),v=setInterval(function(){w("next",i)},b.play),c.data("interval",v)},b.pause),c.data("pause",u)):x()}a("."+b.container,a(this)).children().wrapAll('<div class="slides_control"/>');var c=a(this),d=a(".slides_control",c),e=d.children().size(),f=d.children().outerWidth(),g=d.children().outerHeight(),h=b.start-1,i=b.effect.indexOf(",")<0?b.effect:b.effect.replace(" ","").split(",")[0],j=b.effect.indexOf(",")<0?i:b.effect.replace(" ","").split(",")[1],k=0,l=0,m=0,n=0,o,p,q,r,s,t,u,v;if(e<2)return a("."+b.container,a(this)).fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()}),a("."+b.next+", ."+b.prev).fadeOut(0),!1;if(e<2)return;h<0&&(h=0),h>e&&(h=e-1),b.start&&(n=h),b.randomize&&d.randomize(),a("."+b.container,c).css({overflow:"hidden",position:"relative"}),d.children().css({position:"absolute",top:0,left:d.children().outerWidth(),zIndex:0,display:"none"}),d.css({position:"relative",width:f*3,height:g,left:-f}),a("."+b.container,c).css({display:"block"}),b.autoHeight&&(d.children().css({height:"auto"}),d.animate({height:d.children(":eq("+h+")").outerHeight()},b.autoHeightSpeed));if(b.preload&&d.find("img:eq("+h+")").length){a("."+b.container,c).css({background:"url("+b.preloadImage+") no-repeat 50% 50%"});var z=d.find("img:eq("+h+")").attr("src")+"?"+(new Date).getTime();a("img",c).parent().attr("class")!="slides_control"?t=d.children(":eq(0)")[0].tagName.toLowerCase():t=d.find("img:eq("+h+")"),d.find("img:eq("+h+")").attr("src",z).load(function(){d.find(t+":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){a(this).css({zIndex:5}),a("."+b.container,c).css({background:""}),o=!0,b.slidesLoaded()})})}else d.children(":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()});b.bigTarget&&(d.children().css({cursor:"pointer"}),d.children().click(function(){return w("next",i),!1})),b.hoverPause&&b.play&&(d.bind("mouseover",function(){x()}),d.bind("mouseleave",function(){y()})),b.generateNextPrev&&(a("."+b.container,c).after('<a href="#" class="'+b.prev+'">Prev</a>'),a("."+b.prev,c).after('<a href="#" class="'+b.next+'">Next</a>')),a("."+b.next,c).click(function(a){a.preventDefault(),b.play&&y(),w("next",i)}),a("."+b.prev,c).click(function(a){a.preventDefault(),b.play&&y(),w("prev",i)}),b.generatePagination?(b.prependPagination?c.prepend("<ul class="+b.paginationClass+"></ul>"):c.append("<ul class="+b.paginationClass+"></ul>"),d.children().each(function(){a("."+b.paginationClass,c).append('<li><a href="#'+m+'">'+(m+1)+"</a></li>"),m++})):a("."+b.paginationClass+" li a",c).each(function(){a(this).attr("href","#"+m),m++}),a("."+b.paginationClass+" li:eq("+h+")",c).addClass(b.currentClass),a("."+b.paginationClass+" li a",c).click(function(){return b.play&&y(),q=a(this).attr("href").match("[^#/]+$"),n!=q&&w("pagination",j,q),!1}),a("a.link",c).click(function(){return b.play&&y(),q=a(this).attr("href").match("[^#/]+$")-1,n!=q&&w("pagination",j,q),!1}),b.play&&(v=setInterval(function(){w("next",i)},b.play),c.data("interval",v))})},a.fn.slides.option={preload:!1,preloadImage:"/img/loading.gif",container:"slides_container",generateNextPrev:!1,next:"next",prev:"prev",pagination:!0,generatePagination:!0,prependPagination:!1,paginationClass:"pagination",currentClass:"current",fadeSpeed:350,fadeEasing:"",slideSpeed:350,slideEasing:"",start:1,effect:"slide",crossfade:!1,randomize:!1,play:0,pause:0,hoverPause:!1,autoHeight:!1,autoHeightSpeed:350,bigTarget:!1,animationStart:function(){},animationComplete:function(){},slidesLoaded:function(){}},a.fn.randomize=function(b){function c(){return Math.round(Math.random())-.5}return a(this).each(function(){var d=a(this),e=d.children(),f=e.length;if(f>1){e.hide();var g=[];for(i=0;i<f;i++)g[g.length]=i;g=g.sort(c),a.each(g,function(a,c){var f=e.eq(c),g=f.clone(!0);g.show().appendTo(d),b!==undefined&&b(f,g),f.remove()})}})}})(jQuery)
                </script>
                <script src="https://site-itam.googlecode.com/svn/branches/lib/jquery.slides.js"></script>
                <script>
    
                        google.script.run.withSuccessHandler(getAnnouncementsInfo).getAnnouncementsSlidder();
    
                        function getAnnouncementsInfo(noticias) {
                                var news = noticias.split("|");

                                for (var i = 0; i < news.length - 1; i++) {
                                        var noticia = news[i].split(";");
                                        var fecha = noticia[0];
                                        var titulo = noticia[1];
                                        var contenido = noticia[2];
                                        var autor = noticia[3];
                                        var url = noticia[4];
                                        titulo = cut_text(titulo, 43);
                                        contenido = cut_text(contenido, 450);
                                        $('#f'  + (i + 1)).text('Fecha: ' + fecha);
                                        $('#h' + (i + 1)).text(titulo);
                                        $('#c'  + (i + 1)).text(contenido);
                                        $('#a'  + (i + 1)).text('Autor: ' + autor);
                                        $('#l'  + (i + 1)).attr('href', url);
                                
                                }
                                
                                slide_news();
                                
                        }
    
                        function cut_text(text, size) {
                   
                                if (text.length > size) {
                                   text = text.substring(0, size);
                                   var index = text.lastIndexOf(' ');
                                   if (index != -1) {
                                           text = text.substring(0, (index + 1));
                                   }
                                   text = text.trim();
                                   text = text + '...';
                                }
                                
                                return text;
                                
                        }
    
                        function slide_news() {
                                $('#slides').slides({
                                        preload : true,
                                        preloadImage : 'https://site-itam.googlecode.com/svn/branches/img/loading.gif',                                 
                                        play : 7000, //7000
                                        pause : 3500,//3500
                                        hoverPause : true,
                                        animationStart : function(current) {
                                                $('.caption').animate({
                                                        bottom : -35
                                                }, 100);
                                                if (window.console && console.log) {
                                                        // example return of current slide number
                                                        console.log('animationStart on slide: ', current);
                                                }
                                                ;
                                        },
                                        animationComplete : function(current) {
                                                $('.caption').animate({
                                                        bottom : 0
                                                }, 200);
                                                if (window.console && console.log) {
                                                        // example return of current slide number
                                                        console.log('animationComplete on slide: ', current);
                                                }
                                                ;
                                        },
                                        slidesLoaded : function() {
                                                $('.caption').animate({
                                                        bottom : 0
                                                }, 200);
                                        }
                                });
                                
                                $('.pagination li a')
                                                .css('background-image', 'url(https://site-itam.googlecode.com/svn/branches/img/pagination.png)');
                                
                        }
    
                </script>
        </head>
        <body>
                <div id="slides">
                        <div class="slides_container">        
                                <div class="slide" style='cursor: pointer;'>
                                        <table>
                                                <tr>
                                                        <td width="50"></td>
                                                        <td width="450"><h4 id="f1" style="color:#094FA4;" align="right">A</h4></td>
                                                        <td width="50"></td>
                                                </tr>
                                                <tr>
                                                        <td width="50"></td>
                                                        <td width="450" style="border-bottom:2px solid #094FA4;"><h1 id="h1" style="color:#094FA4;">A</h1></td>
                                                        <td width="50"></td>
                                                </tr>
                                                <tr>
                                                        <td width="50"></td>
                                                        <td width="450"><h3 id="c1" style="color:#094FA4;">A</h3></td>
                                                        <td width="50"></td>
                                                </tr>
                        <tr>
                                                        <td width="50"></td>
                                                        <td width="450">
                                                                </br>
                                                                <h4 id="a1" style="color:#094FA4;height:3px;" align="center">A</h4>
                                <a id='l1' href='#' target='_blank'><h4 style="color:#094FA4;height:3px;" align="left">Leer mas...</h4></a>
                            </td>
                                                        <td width="50"></td>
                                                </tr>
                                        </table>
                                        
                                </div>
                                <div class="slide">
                                        <table>
                                                <tr>
                                                        <td width="50"></td>
                                                        <td width="450"><h4 id="f2" style="color:#094FA4;" align="right">A</h4></td>
                                                        <td width="50"></td>
                                                </tr>
                                                <tr>
                                                        <td width="50"></td>
                                                        <td width="450" style="border-bottom:2px solid #094FA4;"><h1 id="h2" style="color:#094FA4;">A</h1></td>
                                                        <td width="50"></td>
                                                </tr>
                                                <tr>
                                                        <td width="50"></td>
                                                        <td width="450"><h3 id="c2" style="color:#094FA4;">A</h3></td>
                                                        <td width="50"></td>
                                                </tr>
                        <tr>
                                                        <td width="50"></td>
                                                        <td width="450">
                                                                </br>
                                <h4 id="a2" style="color:#094FA4;height:3px;" align="center">A</h4>
                                <a id='l2' href='#' target='_blank'><h4 style="color:#094FA4;height:3px;" align="left">Leer mas...</h4></a>
                            </td>
                                                        <td width="50"></td>
                                                </tr>
                                        </table>
                                </div>
                                <div class="slide">
                                        <table>
                                                <tr>
                                                        <td width="50"></td>
                                                        <td width="450"><h4 id="f3" style="color:#094FA4;" align="right">A</h4></td>
                                                        <td width="50"></td>
                                                </tr>
                                                <tr>
                                                        <td width="50"></td>
                                                        <td width="450" style="border-bottom:2px solid #094FA4;"><h1 id="h3" style="color:#094FA4;">A</h1></td>
                                                        <td width="50"></td>
                                                </tr>
                                                <tr>
                                                        <td width="50"></td>
                                                        <td width="450"><h3 id="c3" style="color:#094FA4;">A</h3></td>
                                                        <td width="50"></td>
                                                </tr>
                        <tr>
                                                        <td width="50"></td>
                                                        <td width="450">
                                                                </br>
                                <h4 id="a3" style="color:#094FA4;height:3px;" align="center">A</h4>
                                <a id='l3' href='#' target='_blank'><h4 style="color:#094FA4;height:3px;" align="left">Leer mas...</h4></a>
                            </td>
                                                        <td width="50"></td>
                                                </tr>
                                        </table>
                                </div>
                                <div class="slide">
                                        <table>
                                                <tr>
                                                        <td width="50"></td>
                                                        <td width="450"><h4 id="f4" style="color:#094FA4;" align="right">A</h4></td>
                                                        <td width="50"></td>
                                                </tr>
                                                <tr>
                                                        <td width="50"></td>
                                                        <td width="450" style="border-bottom:2px solid #094FA4;"><h1 id="h4" style="color:#094FA4;">A</h1></td>
                                                        <td width="50"></td>
                                                </tr>
                                                <tr>
                                                        <td width="50"></td>
                                                        <td width="450"><h3 id="c4" style="color:#094FA4;">A</h3></td>
                                                        <td width="50"></td>
                                                </tr>
                                                <tr>
                                                        <td width="50"></td>
                                                        <td width="450">
                                                                </br>
                                <h4 id="a4" style="color:#094FA4;height:3px;" align="center">A</h4>
                                <a id='l4' href='#' target='_blank'><h4 style="color:#094FA4;height:3px;" align="left">Leer mas...</h4></a>
                            </td>
                                                        <td width="50"></td>
                                                </tr>
                                        </table>
                                </div>
                        </div>
                        <a href="#" class="prev">
                                <img src="https://site-itam.googlecode.com/svn/branches/img/arrow-prev.png" width="24" height="43" alt="Arrow Prev">
                        </a>
                        <a href="#" class="next">
                                <img src="https://site-itam.googlecode.com/svn/branches/img/arrow-next.png" width="24" height="43" alt="Arrow Next">
                        </a>
                </div>
        </body>
</html>